
<template>

  <vxe-table ref="xTable" keep-source border resizable show-overflow :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}" @edit-closed="editClosedEvent">
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="Name" :edit-render="{name: 'input', }"></vxe-column>
    <vxe-column field="role" title="Role" :edit-render="{name: '$input', }"></vxe-column>
  </vxe-table>

</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "0",
          age: 28,
          address: "vxe-table 从入门到放弃",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "1",
          age: 22,
          address: "Guangzhou",
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "0",
          age: 32,
          address: "Shanghai",
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "1",
          age: 23,
          address: "vxe-table 从入门到放弃",
        },
        {
          id: 10005,
          name: "Test5",
          role: "Develop",
          sex: "1",
          age: 30,
          address: "Shanghai",
        },
        {
          id: 10006,
          name: "Test6",
          role: "Designer",
          sex: "1",
          age: 21,
          address: "vxe-table 从入门到放弃",
        },
      ],
      sexList: [
        { label: "女", value: "0" },
        { label: "男", value: "1" },
      ],
    };
  },
  methods: {
    enterFilterEvent({ $panel, column }, event) {
      if (event.keyCode === 13) {
        console.log("筛选回车事件");
        $panel.confirmFilter();
      }
    },
    nameChangeEvent({ column }) {
      console.log(`${column.title} 触发 input 事件`);
    },
    roleChangeEvent({ row }) {
      console.log(row);
    },
    roleFocusEvent({ column }) {
      console.log(`${column.title} 触发 focus 事件`);
    },
    sexChangeEvent({ column }) {
      console.log(`${column.title} 触发 change 事件`);
    },
    dateChangeEvent({ row, column }) {
      // con
      console.log(`${column.title} 触发 change 事件`);
    },
    editClosedEvent({ row, column }) {
        console.log("关闭了")
      console.log(row);
      console.log(column.property)
      const $table = this.$refs.xTable;

      console.log($table)
      // 判断单元格值是否被修改
      if ($table.isUpdateByRow(row, column.property)) {
        console.log("被修改了");
        // setTimeout(() => {
        //   this.$XModal.message({
        //     content: `局部保存成功！ ${field}=${cellValue}`,
        //     status: "success",
        //   });
        //   // 局部更新单元格为已保存状态
        //   $table.reloadRow(row, null, field);
        // }, 300);
      }
    },
  },
};
</script>

<style>
button {
  margin: 1px !important;
  border: 0px !important;
  /* padding: px !important; */
}
/* body{
    background-color: blueviolet;
} */
</style>
